<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1.引入 ECharts 文件 -->
  <script src="./echarts/echarts.min.js"></script>
  <!-- 中国地图 -->
  <script src="./echarts/china.js"></script>
</head>

<body>
  <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">

    // 3.1 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('#main'))

    // 3.2 指定图表的配置项和数据
    let chinaGeoCoordMap =
    {
      "顺义校区": [
        116.4551,
        40.2539
      ],
      "义安区": [
        117.812079,
        30.945429
      ],
      "米东区": [
        87.655755,
        43.973579
      ],
      "顺河回族区": [
        114.364875,
        34.800459
      ],
      "龙胜各族自治县": [
        110.011238,
        25.797931
      ],
      "宣威市": [
        104.104497,
        26.219759
      ],
      "南宫市": [
        115.408748,
        37.359264
      ],
      "卡若区": [
        97.180437,
        31.138507
      ],
      "安宁市": [
        102.478494,
        24.919493
      ],
      "永昌县": [
        101.984649,
        38.24317
      ],
      "元江哈尼族彝族傣族自治县": [
        101.998103,
        23.596503
      ],
      "融安县": [
        109.397538,
        25.22455
      ],
      "融水苗族自治县": [
        109.256334,
        25.065934
      ],
      "雨湖区": [
        112.903317,
        27.854705
      ],
      "玄武区": [
        118.797861,
        32.048687
      ],
      "历下区": [
        117.076455,
        36.666412
      ],
      "宿豫区": [
        118.330782,
        33.946822
      ],
      "新平彝族傣族自治县": [
        101.990157,
        24.070051
      ],
      "浈江区": [
        113.611098,
        24.804381
      ],
      "向阳区": [
        130.365346,
        46.80779
      ],
      "淄川区": [
        117.966723,
        36.643452
      ],
      "龙亭区": [
        114.35473,
        34.815784
      ],
      "沙河市": [
        114.503335,
        36.854922
      ],
      "雄关区": [
        98.274891,
        39.783332
      ],
      "康巴什区": [
        109.781327,
        39.608266
      ],
      "金川区": [
        102.194089,
        38.521085
      ],
      "衡山县": [
        112.868268,
        27.230291
      ],
      "管城回族区": [
        113.677548,
        34.7545
      ],
      "卫东区": [
        113.335193,
        33.734707
      ],
      "罗湖区": [
        114.131764,
        22.548171
      ],
      "内乡县": [
        111.849392,
        33.044865
      ],
      "潢川县": [
        115.051808,
        32.131383
      ],
      "平原县": [
        116.434056,
        37.165314
      ],
      "峄城区": [
        117.590816,
        34.773263
      ]
    }


    let chinaDatas = [
      [
        {
          "name": "义安区",
          "value": 1
        }
      ],
      [
        {
          "name": "米东区",
          "value": 2
        }
      ],
      [
        {
          "name": "顺河回族区",
          "value": 3
        }
      ],
      [
        {
          "name": "龙胜各族自治县",
          "value": 3
        }
      ],
      [
        {
          "name": "宣威市",
          "value": 3
        }
      ],
      [
        {
          "name": "南宫市",
          "value": 2
        }
      ],
      [
        {
          "name": "卡若区",
          "value": 2
        }
      ],
      [
        {
          "name": "安宁市",
          "value": 1
        }
      ],
      [
        {
          "name": "永昌县",
          "value": 3
        }
      ],
      [
        {
          "name": "元江哈尼族彝族傣族自治县",
          "value": 1
        }
      ],
      [
        {
          "name": "融安县",
          "value": 2
        }
      ],
      [
        {
          "name": "融水苗族自治县",
          "value": 3
        }
      ],
      [
        {
          "name": "雨湖区",
          "value": 1
        }
      ],
      [
        {
          "name": "玄武区",
          "value": 1
        }
      ],
      [
        {
          "name": "历下区",
          "value": 2
        }
      ],
      [
        {
          "name": "宿豫区",
          "value": 1
        }
      ],
      [
        {
          "name": "新平彝族傣族自治县",
          "value": 1
        }
      ],
      [
        {
          "name": "浈江区",
          "value": 1
        }
      ],
      [
        {
          "name": "向阳区",
          "value": 1
        }
      ],
      [
        {
          "name": "淄川区",
          "value": 1
        }
      ],
      [
        {
          "name": "龙亭区",
          "value": 3
        }
      ],
      [
        {
          "name": "沙河市",
          "value": 1
        }
      ],
      [
        {
          "name": "雄关区",
          "value": 1
        }
      ],
      [
        {
          "name": "康巴什区",
          "value": 1
        }
      ],
      [
        {
          "name": "金川区",
          "value": 1
        }
      ],
      [
        {
          "name": "衡山县",
          "value": 1
        }
      ],
      [
        {
          "name": "管城回族区",
          "value": 1
        }
      ],
      [
        {
          "name": "卫东区",
          "value": 1
        }
      ],
      [
        {
          "name": "罗湖区",
          "value": 1
        }
      ],
      [
        {
          "name": "内乡县",
          "value": 1
        }
      ],
      [
        {
          "name": "潢川县",
          "value": 1
        }
      ],
      [
        {
          "name": "平原县",
          "value": 1
        }
      ],
      [
        {
          "name": "峄城区",
          "value": 1
        }
      ]
    ]

    let planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

    let convertData = function (data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = chinaGeoCoordMap[dataItem[0].name];
        let toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    let series = [];
    [['顺义校区', chinaDatas]].forEach(function (item, i) {
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.2 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 12
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 4 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 6,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              offset: [5, 0],
              color: 'yellow', // 目标点文字颜色
              formatter: '{b}',
              textStyle: {
                color: "yellow"
              }
            },
            emphasis: {
              show: true,
              color: "green", // 目标点鼠标移入的颜色
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });

    let option = {
      title: {
        text: '来京路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            // color: 'rgba(51, 69, 89, .5)', //地图背景色
            // color: '#5a6fc0', //地图背景色
            // borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };

    // 3.3使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>